<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>

    <style>
        .active {
            color: #FF0000;
			cursor: pointer;
        }
    </style>
</head>
<body>


<div id="app">

    <!--<div>{{msg}}</div>-->
    <!--<button @click="btnClick(123, $event)">点击</button>-->

    <ul>
        <li v-for="(item, index) in items" 
		:class="{active:currentIndex === index}" 
		@click="Onclick(index)">
		{{index}} - {{item}}
		</li>
    </ul>

</div>


<script src="./vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
            items: ['钢铁侠', '美国队长', '宙斯', ' 海格力斯', '雷神'],
            currentIndex: 0
        },
        methods: {
            btnClick(abc, $e) {
                console.log(abc + '====');
                console.log($e);
            },

            Onclick(index){
                this.currentIndex = index;
            }
        },
        computed: {
            fullName() {
                return this.msg;
            }
        }
    })

</script>

</body>
</html>